<template>
<div id="detailContainer" class='detailSlide'>
    <Theader title='影片详情'>
        <i class="iconfont icon-right" @click='back'></i>
    </Theader>
    <div id="content" class="contentDetail">
		<div class="detail_list">
			<div class="detail_list_bg" :style='bg(movie.mainpic)'></div>
			<div class="detail_list_filter"></div>
			<div class="detail_list_content">
				<div class="detail_list_img">
					<img :src="movie.mainpic" alt="">
				</div>
				<div class="detail_list_info">
					<h2>{{movie.title}}</h2>
					<p>{{movie.daoyan}}</p>
					<p>9.2</p>
					<p>{{movie.type}}</p>
					<p>{{movie.country}} / {{movie.duration}}</p>
					<p>{{movie.time}}上映</p>
				</div>
			</div>
		</div>
		<div class="detail_intro">
			<p>{{movie.content}}</p>
		</div>
		<div class="detail_player swiper-container">
			<ul class="swiper-wrapper">
				<li class="swiper-slide" 
				v-for='person in movie.photos' 
				:key='person.name'
				>
					<div>
						<img :src="person.img" alt="">
					</div>
					<p>{{person.name}}</p>
					<p>{{person.type}}</p>
				</li>
			</ul>
		</div>
	</div>
</div>
</template>

<script>
import Theader from '@/components/Theader'
export default {
    name:'Detail',
	data(){
		return {
			movie:{}
		}
	},
    components:{
        Theader
    },
    methods:{
        back(){
            this.$router.back();
        },
		bg(pic){
			return {
				backgroundImage:'url('+pic+')'
			}
		}
    },
	async created(){
		let id = this.$route.params.id;
		let data = await this.$axios.get('/api/detail?id='+id);
		console.log(data)
		this.movie = data;
		this.$nextTick(function(){
			new Swiper('.detail_player' , {
				slidesPerView : 'auto',
				freeMode : true,
				freeModeSticky: true
			});
		})
	}
}
</script>

<style scoped>
#detailContainer{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	z-index:99;
	background:#fff;
	min-height:100%;
}
.detailSlide{
	animation: slide .3s;
}
@keyframes slide{
	from{
		transform:translateX(100%)
	}
	to{
		transform:translateX(0)
	}
}
#content.contentDetail{ display: block; margin-bottom:0;}
#content .detail_list{ height:200px; width:100%; position: relative; overflow: hidden;}
.detail_list .detail_list_bg{ width:100%; height:100%; background: url(/images/movie_1.jpg) 0 40%; filter: blur(20px); background-size:cover; position: absolute; left: 0; top: 0;}
.detail_list .detail_list_filter{ width:100%; height:100%; position: absolute;background-color: #40454d;opacity: .55; position: absolute; left: 0; top: 0; z-index: 1;}
.detail_list .detail_list_content{ display: flex; width:100%; height:100%; position: absolute; left: 0; top: 0; z-index: 2;}
.detail_list .detail_list_img{ width:108px; height: 150px; border: solid 1px #f0f2f3; margin:20px;}
.detail_list .detail_list_img img{ width:100%; height: 100%;}
.detail_list .detail_list_info{ margin-top: 20px;}
.detail_list .detail_list_info h2{ font-size: 20px; color:white; font-weight: normal; line-height: 40px;}
.detail_list .detail_list_info p{ color:white; line-height: 20px; font-size: 14px; color:#ccc;}
#content .detail_intro{ padding: 10px;}
#content .detail_player{ margin:20px;}
.detail_player .swiper-slide{ width:70px; margin-right: 20px; text-align: center; font-size: 14px;}
.detail_player .swiper-slide img{ width:100%; margin-bottom: 5px;}
.detail_player .swiper-slide p:nth-of-type(2){ color:#999;}
</style>